<template>
	<!-- 	<d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
		<d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners">
			<div slot="header">
				<crud-search
					ref="search"
					:options="crud.searchOptions"
					@submit="handleSearch"
				/>
				<el-button-group>
					<el-button size="small" type="primary" @click="addRow"
						><i class="el-icon-plus" /> 新增</el-button
					>
				</el-button-group>
				<crud-toolbar
					:search.sync="crud.searchOptions.show"
					:compact.sync="crud.pageOptions.compact"
					:columns="crud.columns"
					@refresh="doRefresh()"
					@columns-filter-changed="handleColumnsFilterChanged"
				/>
			</div>
		</d2-crud-x>
	</d2-container> -->
	<div>
		<!-- 公众号设置 -->
		<el-col :span="24" style="margin-top: 10px">
			<!-- <h2 style="font-weight: 300; margin-left: 20px; font-size: 22px">
				公众号设置
			</h2> -->
			<!-- 预览功能 -->

			<div class="flex" v-show="openpreview"></div>
			<div class="preview" v-show="openpreview">
				<div class="previewcon">
					<img class="previewimg" :src="previewimg" />
					<div class="previewtextbot">
						<div
							class="previewli"
							:class="{
								previewlione: list.length == 1,
								previewlitwo: list.length == 2,
							}"
							v-for="(item, indx) in list"
							:key="indx"
						>
							<div
								class="previewtianjia"
								v-show="previewtext == indx"
							>
								<a
									class="previewaddadd"
									v-for="(item, index) in item.list"
									:href="item.http"
									target="view_window"
									:key="index"
									>{{ item.name }}</a
								>
								<div
									class="previewarrow"
									v-show="item.list.length > 0"
								></div>
							</div>
							<div
								class="previewtext"
								v-show="item.list.length > 0"
								@click="preview(item, indx)"
							>
								{{ item.name }}
							</div>
							<a
								class="previewtext"
								v-show="item.list.length == 0"
								:href="item.http"
								target="view_window"
								@click="preview(item, indx)"
								>{{ item.name }}</a
							>
						</div>
					</div>
				</div>
				<el-button
					type="primary"
					style="display: block; margin: 10px auto"
					@click="out"
					>退出预览</el-button
				>
			</div>

			<!-- <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple warning">
                    <p>
                        <i class="el-icon-warning tips"></i>温馨提示:
                        <span class="on">立即授权</span>
                    </p>
                    <p>微信公众号提现需要特约商户签约，材料交给我们代为提交。签约费用500元</p>
                </div>
            </el-col> -->
			<el-col :span="24">
				<el-col :span="5" class="left">
					<img class="top" :src="top" />
					<img class="bottom" :src="bottom" />
					<div
						style="
							background: #f4f5f9;
							min-height: 438px;
							position: absolute;
							top: 63px;
							width: 320px;
						"
					></div>
					<div class="textbot">
						<div
							class="li"
							v-for="(item, indx) in list"
							:key="indx"
						>
							<div v-show="activeClass == indx">
								<div class="add" @click="add(indx)">
									<i class="el-icon-plus"></i>
									<div class="arrow"></div>
								</div>
								<div class="tianjia">
									<div
										class="addadd"
										v-for="(item, index) in item.list"
										:key="index"
										:class="
											addindex == index ? 'active' : ''
										"
										@click="gettem(item, index)"
									>
										{{ item.name }}
									</div>
								</div>
							</div>
							<div
								class="text"
								:class="activeClass == indx ? 'active' : ''"
								@click="getItem(item, indx)"
							>
								{{ item.name }}
							</div>
						</div>
						<div class="li" v-show="list.length < 3">
							<div class="text" @click="addtext">
								<i class="el-icon-plus"></i>
							</div>
						</div>
					</div>
				</el-col>

				<el-col :span="15" style="padding-left: 20px">
					<el-card class="box-card right">
						<div slot="header" class="clearfix">
							<span>{{ input }}</span>
							<el-button
								style="float: right; padding: 3px 0"
								type="text"
								@click="delet"
								>删除子菜单</el-button
							>
						</div>
						<div style="display: flex">
							<label style="line-height: 34px; width: 80px"
								>菜单名称</label
							>
							<el-input
								v-model="input"
								placeholder="请输入内容"
								style="width: 70%"
							></el-input>
						</div>
						<p style="color: #9a8d8d; margin-left: 80px">
							仅支持中英文和数字，字数不超过4个汉字或8个字母
						</p>
						<div style="display: flex">
							<label style="line-height: 34px; width: 80px"
								>菜单内容</label
							>
							<el-radio-group
								v-model="radio"
								style="line-height: 45px"
							>
								<el-radio :label="1">平台模板</el-radio>
								<el-radio :label="2">跳转的网页</el-radio>
								<el-radio :label="3">跳转的小程序</el-radio>
							</el-radio-group>
						</div>
						<div
							style="background: #fff; padding: 10px 0"
							v-show="radio == 1"
						>
							<el-radio-group
								v-model="radiobottom"
								style="padding: 0 30px"
							>
								<p
									style="margin: 8px 0"
									v-for="(item, index) in listlist"
									:key="index"
								>
									<el-radio :label="index"
										>{{ item.name
										}}{{ item.http }}</el-radio
									>
								</p>
							</el-radio-group>
						</div>
						<div
							style="background: #fff; padding: 10px 0"
							v-show="radio == 2"
						>
							<p style="color: #9a8d8d; margin-left: 30px">
								订阅者点击该子菜单会跳到以下链接
							</p>
							<div style="display: flex; padding: 0 30px">
								<label style="line-height: 34px; width: 65px"
									>页面地址</label
								>
								<el-input
									v-model="inputhttp"
									placeholder="请输入内容"
									style="width: 70%"
								></el-input>
							</div>
						</div>
						<div v-show="radio == 3">
							<el-button>选择小程序</el-button>
						</div>
					</el-card>
				</el-col>
				<el-col :span="24">
					<el-button
						style="display: block; margin: 10px auto"
						@click="open"
						>打开预览</el-button
					>
					<el-button
						type="primary"
						style="display: block; margin: 10px auto"
						>保存并发布</el-button
					>
				</el-col>
			</el-col>
		</el-col>
	</div>
</template>

<script>
import * as api from "./api";
import { crudOptions } from "./crud";
import { d2CrudPlus } from "d2-crud-plus";
export default {
	name: "tenantClient",
	mixins: [d2CrudPlus.crud],
	data() {
		return {
			previewimg:
				"https://tse1-mm.cn.bing.net/th/id/OIP-C.4pNQ7fGv1lXqSmcPKm5DKQHaO3?w=174&h=350&c=7&r=0&o=5&dpr=1.3&pid=1.7",
			previewtext: 0,
			openpreview: false,
			top: "",
			bottom: "",
			activeClass: 0,
			addindex: -1,
			input: "",
			inputhttp: "",
			radio: 1,
			radiobottom: 0,
			shu: 6,
			id: 1,
			list: [
				{
					name: "菜单一",
					http: "https://www.baidu.com/",
					id: 1,
					list: [
						{
							name: "我是1",
							http: "https://www.baidu.com/",
							id: 4,
						},
					],
				},
				{
					name: "菜单二",
					http: "https://www.baidu.com/",
					id: 2,
					list: [
						{
							name: "我是2",
							http: "https://www.baidu.com/",
							id: 5,
						},
					],
				},
				{
					name: "菜单三",
					http: "https://www.baidu.com/",
					id: 3,
					list: [
						{
							name: "我是3",
							http: "https://www.baidu.com/",
							id: 6,
						},
					],
				},
			],
			listlist: [],
		};
	},
	mounted() {
		this.rech();
		this.input = this.list[0].name;
		this.inputhttp = this.list[0].http;
	},
	watch: {
		// 如果 `input` 发生改变，这个函数就会运行
		input: function () {
			for (var i = 0; i < this.list.length; i++) {
				for (var j = 0; j < this.list[i].list.length; j++) {
					if (this.list[i].list[j].id === this.id) {
						this.list[i].list[j].name = this.input;
					}
				}
				if (this.list[i].id === this.id) {
					this.list[i].name = this.input;
				}
			}
			this.rech();
			// 限制名字个数
			var temp = 0;
			for (var k = 0; k < this.input.length; k++) {
				if (/[\u4e00-\u9fa5]/.test(this.input[k])) {
					temp += 2;
				} else {
					temp++;
				}
				if (temp > 8) {
					this.input = this.input.substr(0, k);
					this.$message({
						message:
							"仅支持中英文和数字，字数不超过4个汉字或8个字母",
						type: "warning",
					});
				}
			}
		},
		inputhttp: function () {
			for (var i = 0; i < this.list.length; i++) {
				for (var j = 0; j < this.list[i].list.length; j++) {
					if (this.list[i].list[j].id === this.id) {
						this.list[i].list[j].http = this.inputhttp;
					}
				}
				if (this.list[i].id === this.id) {
					this.list[i].http = this.inputhttp;
				}
			}
			this.rech();
		},
	},
	methods: {
		getCrudOptions() {
			return crudOptions(this);
		},
		pageRequest(query) {
			return api.GetList(query);
		},
		addRequest(row) {
			return api.createObj(row);
		},
		updateRequest(row) {
			return api.UpdateObj(row);
		},
		delRequest(row) {
			return api.DelObj(row.id);
		},

		out() {
			this.openpreview = false;
		},
		open() {
			this.openpreview = true;
		},
		preview(item, index) {
			this.previewtext = index;
		},
		//   父元素
		getItem(item, index) {
			this.addindex = -1;
			this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
			this.input = item.name;
			this.inputhttp = item.http;
			this.id = item.id;
			this.rech();
		},
		// 子元素
		gettem(item, index) {
			this.addindex = index;
			console.log(item);
			this.input = item.name;
			this.inputhttp = item.http;
			this.id = item.id;
			this.rech();
		},
		// 增加
		add(index) {
			this.shu++;
			this.list[index].list.push({
				name: "子菜单" + this.shu,
				http: "https://www.baidu.com/",
				id: this.shu,
			});
			this.rech();
		},
		addtext() {
			this.shu++;
			this.list.push({
				name: "菜单" + this.shu,
				http: "https://www.baidu.com/",
				id: this.shu,
				list: [],
			});
			this.rech();
		},
		// 删除
		delet() {
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					for (var i = 0; i < this.list.length; i++) {
						for (var j = 0; j < this.list[i].list.length; j++) {
							if (this.list[i].list[j].id === this.id) {
								this.list[i].list.splice(j, 1);
								this.addindex = -1;
								this.rech();
								this.$message({
									type: "success",
									message: "删除成功!",
								});
							}
						}
						if (this.list[i].id === this.id) {
							this.list.splice(i, 1);
							this.activeClass = -1;
							this.rech();
							this.$message({
								type: "success",
								message: "删除成功!",
							});
						}
					}
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		rech() {
			this.listlist = [];
			this.list.forEach((item) => {
				this.listlist.push({
					name: item.name,
					http: item.http,
				});
				item.list.forEach((item) => {
					this.listlist.push({
						name: item.name,
						http: item.http,
					});
				});
			});
			for (var i = 0; i < this.listlist.length; i++) {
				if (this.listlist[i].name === this.input) {
					this.radiobottom = i;
				}
			}
		},
	},
};
</script>
<style lang="scss" scoped>
* {
	-moz-user-select: none; /*火狐*/
	-webkit-user-select: none; /*webkit浏览器*/
	-ms-user-select: none; /*IE10*/
	-khtml-user-select: none; /*早期浏览器*/
	user-select: none;
}
.flex {
	position: fixed;
	background: #000000;
	opacity: 0.5;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
}

.preview {
	position: fixed;
	top: 15%;
	left: 45%;
	z-index: 99;
	width: 275px;
}
.preview img {
	width: 100%;
}
.previewcon {
	position: relative;
}
.previewtextbot {
	position: absolute;
	bottom: 40px;
	left: 21px;
	width: 100%;
}
.previewtext {
	height: 36px;
	display: block;
	text-decoration: none;
	color: #999;
}
.previewli {
	float: left;
	width: 78px;
	line-height: 36px;
	border: 1px solid #e7e7eb;
	background: #fafafa;
	text-align: center;
	cursor: pointer;
	color: #999;
	position: relative;
}
.previewlione {
	width: 233px !important;
}
.previewlitwo {
	width: 117px !important;
}
.previewtianjia {
	position: absolute;
	bottom: 55px;
	width: 100%;
	line-height: 36px;
	background: #fafafa;
}

.previewaddadd {
	width: 100%;
	line-height: 36px;
	border: 1px solid #e7e7eb;
	background: #fff;
	height: 36px;
	display: block;
	text-decoration: none;
	color: #999;
}
.previewarrow {
	position: absolute;
	bottom: -15px;
	left: 44%;
	/* 圆角的位置需要细心调试哦 */
	width: 0;
	height: 0;
	font-size: 0;
	border: solid 8px;
	border-color: #fff #e6e6e6 #e6e6e6 #e6e6e6;
}
.warning {
	border: 1px solid #91d5ff;
	background-color: #e6f7ff;
	padding: 5px 20px;
}

.on {
	text-align: right;
	float: right;
	color: #1890ff;
}

.tips {
	color: #1890ff;
	font-size: 20px;
	margin-right: 10px;
}

.left {
	min-width: 390px;
	min-height: 550px;
	position: relative;
	padding-left: 40px;
}

.top {
	position: absolute;
	top: 0px;
}

.bottom {
	position: absolute;
	bottom: 0px;
}

.textbot {
	position: absolute;
	bottom: 0px;
	left: 82px;
	width: 100%;
}

.active {
	border: 1px solid #44b549 !important;
	color: #44b549 !important;
}

.li {
	float: left;
	width: 93px;
	line-height: 48px;
	border: 1px solid #e7e7eb;
	background: #fafafa;
	text-align: center;
	cursor: pointer;
	color: #999;
	position: relative;
}
.text {
	height: 50px;
}
.text:hover {
	color: #000;
}

.add {
	position: absolute;
	bottom: 65px;
	width: 100%;
	line-height: 48px;
	border: 1px solid #e7e7eb;
	background: #fafafa;
}
.arrow {
	position: absolute;
	bottom: -16px;
	left: 36px;
	/* 圆角的位置需要细心调试哦 */
	width: 0;
	height: 0;
	font-size: 0;
	border: solid 8px;
	border-color: #fff #f4f5f9 #f4f5f9 #f4f5f9;
}
.tianjia {
	position: absolute;
	bottom: 115px;
	width: 100%;
	line-height: 48px;
	background: #fafafa;
}

.addadd {
	width: 100%;
	line-height: 48px;
	border: 1px solid #e7e7eb;
	background: #fafafa;
	height: 48px;
}

.right {
	background: #f4f5f9;
	min-height: 550px;
}
</style>
